<script setup>
import { ref, reactive, watchEffect, computed, onUpdated, nextTick } from 'vue'
import { courseApi, sessionApi, userApi, labsApi } from '@/api'
import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
import { StarFilled, DocumentAdd, Flag, Star, Remove } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'
import { OrderedSet } from 'js-sdsl';
import isBetween from 'dayjs/plugin/isBetween'
import "dayjs/locale/zh-cn";
dayjs.extend(isBetween)
dayjs.locale('zh-cn')

const useStore = useUserStore()
const isAdmin = useStore.curLoginUser.authority > 0
const sessions = ref(null)
const labs = ref(null)
const campus = ref(null)
const loading = ref(true)
const users = ref(null)
const sessionSelected = ref(null)
const campusSelected = ref(null)
const tableData = ref(null)
const data = ref(null)
const update = ref(false)
const courseEditData = ref(null)
const courseEditView = ref(false)
const courseAddView = ref(false)
const myTabel = ref(null)
const multiCourseEditView = ref(false)
const multiCourseEditData = reactive({
    user: null,
    course: null,
    date: null,
    content: null,
    lab: null,
    number: null,

    contentCheck: true,
    userCheck: true,
    dateCheck: true,
    courseCheck: true,
    labCheck: true,
    numberCheck: true,
})
const filters = ref({})
const warnData = computed( () => {
    if (data.value) {
        return  data.value.reduce((group, row) => {
            const num = row.course.studentNumber
            const key1 = row.course.courseDate
            const key2 = row.course.whichCourseContent
            const key3 = row.course.labId
            const key = [key1, key2, key3].join('@')
            group[key] = group[key] ?? { val: 0, iswarn: false, data: [] }
            group[key].val += num;
            group[key].iswarn = (group[key].val > row.lab.capacity);
            group[key].data.push(row)

            return group
        }, {})
    }
})
const tags = ref(new OrderedSet([], (a, b) => {
    let at = dayjs(a.courseDate)
    let bt = dayjs(b.courseDate)
    if (at.isSame(bt)) {
        if (a.whichCourseContent === b.whichCourseContent) {
            if (a.labId == b.labId) {
                if (a.userNumber === b.userNumber) {
                    if (a.courseName.trim() === b.courseName.trim()) {
                        return 0
                    }
                    return a.courseName < b.courseName ? -1 : 1;
                }
                return a.userNumber < b.userNumber ? -1 : 1;
            }
            return a.labId < b.labId ? -1 : 1;
        }
        return a.whichCourseContent < b.whichCourseContent ? -1 : 1;
    }
    return at.isBefore(bt) ? -1 : 1;
}))
// 用于保存周tab页选择的周几和节次信息
const addByWeek = reactive({
    selected: [],// 周几,默认是周一,存0 1 2 3 4 5 6
    content: new Array(10), // FIXME:不管后台一天的节次设置可能有多少，这里假定最大10个
})
// 用于显示和保存 日tab页选择的日期，课程节次信息
const addByDay = reactive({
    date: [],// 存放日期
    content: new Array(10),
})

// 用于记录和显示周选框的信息
const weekduration = reactive({ weeks: [], weekCheckbox: [] })
//待添加的数据
const addCourse = reactive({
    userInfo: useStore.curLoginUser, // 任何时候，这个数据是有值的
    labInfo: null,
    stuNumber: 60,
    courseName: '',

})
const currentLabs = ref(null)
const allLabs = ref(null)

// 在每一次过滤选择时，相应的过滤数据也应该变化
const filterData = computed(() => {
    if (tableData.value)
        if (filters.value == null)
            return tableData.value
        else {
            return tableData.value.filter(v => {
                // 无属性 返回true
                for (const k of Object.keys(filters.value)) {

                    let val = filters.value[k]

                    if (val.length === 0) {
                        continue
                    }
                    else {
                        if (!val.includes(eval(`v.${k}`)))
                            return false
                    }
                }
                return true

            }
            )
        }
})

function eidtInformation(row) {
    courseEditView.value = true
    courseEditData.value = row
}
//能删除
async function deleteInformation(row) {

    let ok = await ElMessageBox.confirm(
        `确定要删除课程${row.course.courseName}吗?`,
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).catch(() => {
        ElMessage({
            type: 'info',
            message: '删除取消',
        })
    })
    console.log(ok)

    if (ok === 'confirm') {
        let removeOk = await courseApi.removeCourse(row.course)
        if (removeOk.code === 200) {
            update.value = !update.value // 更新course数据 
        } else {
            ElMessage({
                type: 'error',
                message: '删除操作发生了错误',
            })
        }
    }
}
function editDisable() {
    if (courseEditData.value == null)
        return true
    if (courseEditData.value.user == null)
        return true
    if (courseEditData.value.course == null)
        return true
    if (courseEditData.value.course.courseName == null)
        return true
    if (courseEditData.value.course.courseName.length === 0)
        return true
    if (courseEditData.value.course.whichCourseContent == null)
        return true
    if (courseEditData.value.course.courseDate == null)
        return true
    if (courseEditData.value.lab == null)
        return true
    return false
}
// todo
async function onSubmitCourseEditUpdate() {
    console.log(courseEditData.value)
    courseEditData.value.course.labId = courseEditData.value.lab.labId
    courseEditData.value.course.userNumber = courseEditData.value.user.userNumber
    await courseApi.updateCourse(courseEditData.value.course)
    courseEditView.value = false
}
// date content, teacher, coursename,stusize
// 上传课程至服务器
function onSubmitCourseAddUpdate() {
    console.log([...tags.value])
    tags.value.forEach(v => {
        v.courseDate = dayjs(v.courseDate).format('YYYY-MM-DD')
    })
    courseApi.addCourse([...tags.value]).then((res) => {
        if (res.code == 200) {
            update.value = !update.value

            // 清理
            tags.value.clear()
            addCourse.userInfo = useStore.curLoginUser
            addCourse.courseName = null
            courseAddView.value = false
        }

    })



}


function addWeekTag() {
    // 课程基础信息
    if (addCourse.userInfo == null || addCourse.labInfo == null || addCourse.courseName === null || addCourse.courseName.trim() === '') { 
        ElMessage({type:'warning','message':'[用户] [实验室信息] [课程名]不允许为空'})
        return
    }
    if (weekduration.weekCheckbox.every(v => { return !v })) {
        ElMessage({ type: 'warning', 'message': '选择的周次为空' })
        return
    }
    if (addByWeek.selected.length === 0 || addByWeek.content.every(v => {return v === false; })) {
        ElMessage({ type: 'warning', 'message': '选择的星期或节次为空' })
        return
    }
        
    // 当前选择周的周一
    // FIXME:这个逻辑上是有问题的，当当前是周日时，他的周一可能会向后去找。按照 我们的逻辑应该要向前找周
    // 此处的正确性是建立 学期保存的起始日期是以周一为开始的。
    // 计算日期的tag,星期日本就是下周，按要求是+7,此时seleected按照上面的各专框，故此处后面逻辑是正确的。
    // 存在稍许不足便是 l412这行，不应由此保证
    let cur = dayjs(sessionSelected.value.startTime).day(1)
    for (let index = 0; index < weekduration.weeks.length; index++) {
        if (weekduration.weekCheckbox[index]) { // 选择的周
            // addByWeek.selected// 周几
            // 当前周
            for (var k in addByWeek.selected) { // d 周几

                for (var c = 0; c < addByWeek.content.length; c++) {
                    if (addByWeek.content[c]) {
                        // console.log('Insert,addWeek', cur.day(addByWeek.selected + 1).format('YYYY-MM-DD'), sessionSelected.value.courseContents[c])
                        tags.value.insert(
                            {
                                'courseName': addCourse.courseName,
                                'courseDate': cur.day(addByWeek.selected[k] + 1),
                                'studentNumber': addCourse.stuNumber,
                                'courseRemark': '',
                                'whichCourseContent': c,
                                'verified': false,
                                'userNumber': addCourse.userInfo.userNumber,
                                'sessionId': sessionSelected.value.sessionId,
                                'labId': addCourse.labInfo.labId,
                                'labName': addCourse.labInfo.labName,
                                'userName': addCourse.userInfo.userName
                            }
                     
                        )
                    }
                }
            }
        }
        cur = cur.day(8)
    }

}
function addDayTag() {
    if (addCourse.userInfo == null || addCourse.labInfo == null || addCourse.courseName === null || addCourse.courseName.trim() === '') {
        ElMessage({ type: 'warning', 'message': '[用户] [实验室信息] [课程名] 可能为空' })
        return
    }
    if (addByDay.date.length === 0 || addByDay.content.length === 0) {
        ElMessage({ type: 'warning', 'message': '选择的日期或节次为空' })
        return
    }
    
    for (let cur of addByDay.date) {

        for (let c = 0; c < addByDay.content.length; c++) {
            if (addByDay.content[c]) {
                 console.log('insert,addDay', dayjs(cur).format('YYYY-MM-DD'), sessionSelected.value.courseContents[c])
                tags.value.insert(
                    {
                        'courseName': addCourse.courseName,
                        'courseDate': dayjs(cur).format('YYYY-MM-DD'),
                        'studentNumber': addCourse.stuNumber,
                        'courseRemark': '',
                        'whichCourseContent': c,
                        'verified': false,
                        'userNumber': addCourse.userInfo.userNumber,
                        'sessionId': sessionSelected.value.sessionId,
                        'labId': addCourse.labInfo.labId,
                        'labName': addCourse.labInfo.labName,
                        'userName': addCourse.userInfo.userName

                    }

                )
            }
        }
    }
}
function clear() {
    tags.value.clear();
}
function checkValidDate(d) {
    if (sessionSelected.value != null)
        return !dayjs(d).isBetween(sessionSelected.value.startTime, sessionSelected.value.endTime, 'day', '[]')
    return false
}
function handleTagClose(t) {
    tags.value.eraseElementByKey(t)
}
function selectSessionLabel(item) {
    return `${item.sessionName} (${dayjs(item.startTime).format('YY-MM-DD')} 至 ${dayjs(item.endTime).format('YY-MM-DD')})`
}

// FIXME:如果这里不添加watch的方式，那在这里的值可能要在初始化和每次变动回调时都要去再写一次。添加的watch这样的方式，可能会更省事一些吧，当然计算属性应该也可以，下面table数据就是用了计算属性
watchEffect(() => {
    if (sessionSelected.value != null) {
        weekduration.weeks.length = 0
        weekduration.weekCheckbox.length = 0
        // 此处和前处相同，FIXME startTime 确保是一个非周日数据，存在可能的风险
        // 若是一个周日，则按照本周日后的周一开始。不过目前不用管这个。
        let cur = dayjs(sessionSelected.value.startTime).day(1)
        while (cur.isBefore(dayjs(sessionSelected.value.endTime))) {
            weekduration.weeks.push(`${cur.format("YYYY-MM-DD")}至${cur.day(7).format("YYYY-MM-DD")}`)
            weekduration.weekCheckbox.push(false)
            cur = cur.day(8) // 进到下一周周一
        }
    }
})
watchEffect(() => {
    if (labs.value != null && campusSelected.value != null && labs.value.hasOwnProperty(campusSelected.value)) {
        addCourse.labInfo =
            labs.value[campusSelected.value].length === 0 ? '' : labs.value[campusSelected.value][0]
        currentLabs.value = labs.value[campusSelected.value]

    }
})

watchEffect(
    async () => {
        if (sessionSelected.value && campusSelected.value) {
            loading.value = true
            if (campusSelected.value.trim().length === 0) {
                // 无校区时，不用调用后端
                loading.value = false
            } else {
                update.value = !update.value;
                await courseApi.getAllCourseInfos(sessionSelected.value.sessionId, campusSelected.value).then(res => {
                    data.value = res.data
                    tableData.value = res.data

                })
                loading.value = false
            }
        }
    }
)

const tableUsersFilter = computed(() => {
    if (filterData.value) {

        return [...new Set(filterData.value.map(v => {
            return JSON.stringify({
                text: v.user ? `${v.user.userName}(${v.user.userNumber})` : '',
                value: v.user ? v.user.userNumber : null
            })
        }))].map(v => JSON.parse(v))
    }


})
const tableCourseFilter = computed(() => {
    if (filterData.value) {
        return [...new Set(filterData.value.map(v => {
            return JSON.stringify({
                text: v.course.courseName,
                value: v.course.courseName
            })
        }))].map(v => JSON.parse(v))
    }
})
const tableLabFilter = computed(() => {

    if (filterData.value) {
        return [...new Set(filterData.value.map(v => {
            return JSON.stringify({
                text: v.lab ? v.lab.labName :
                    '',
                value: v.lab ? v.lab.labName : null
            })
        }))].map(v => JSON.parse(v))
    }
})
const tableDateFilter = computed(() => {
    if (filterData.value) {
        return [...new Set(filterData.value.map(v => {
            return JSON.stringify({
                text: v.course.courseDate,
                value: v.course.courseDate
            })
        }))].map(v => JSON.parse(v))
    }
})

const tableContentFilter = computed(() => {
    if (filterData.value) {
        return [...new Set(filterData.value.map(v => {
            return JSON.stringify({
                text: sessionSelected ? sessionSelected.value.courseContents[v.course.whichCourseContent] :
                    '',
                value: v.course.whichCourseContent
            })
        }))].map(v => JSON.parse(v))
    }
})



watchEffect(() => {
    sessionApi.getSessionsInfos().then(res => {
        sessions.value = res.data
        if (sessions.value.length != 0) {
            let findRet = sessions.value.find(v => v.cur === true)
            if (typeof findRet != 'undefined') {
                sessionSelected.value = findRet
                return
            }
        }
        sessionSelected.value = null
    })
})
watchEffect(() => {
    labsApi.getLabByCampus(null).then(res => {
        labs.value = res.data
        //  campus.value = labs.value
        campus.value = Object.keys(labs.value)
        campusSelected.value = campus.value.length === 0 ? '' : campus.value[0]
        allLabs.value = Object.values(labs.value).flat()
    })
})
watchEffect( () => {
    if (isAdmin) {
        userApi.getUserInfos().then(res => {
            users.value = res.data
        })
    } else {
        users.value = Array.of(useStore.curLoginUser)
    }
})


// onUpdated(() => {
//     // 又是一个蹩脚的东西，但想不到其他法的方法了，不想去得新定制filter，只能用比较dom的方式，不过真难看
//     nextTick(() => {
//         let pop = document.getElementsByClassName('flagPop')
//         if (pop) {
//             let child = pop[0]
//             let labels = child.querySelectorAll('label')
//             labels.forEach(v => {
//                 let iconSpan = v.getElementsByClassName('el-checkbox__label')[0]
//                 let f = iconSpan.innerHTML[0]
//                 if (f == 1) {
//                     iconSpan.innerHTML = `<i class="el-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M288 128h608L736 384l160 256H288v320h-96V64h96z"></path></svg></i>`
//                 } else if (f == 2) {
//                     iconSpan.innerHTML = `<i class="el-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path></svg></i>`
//                 } else if (f == 0) {
//                     iconSpan.innerHTML = '(empty)' 
//                 }

//             })
//         }
//     })
// })

// 教师名过滤函数
function userNameFilter(value, row, column) {
    if (row.user) {
        return row.user.userNumber === value
    }
    if (value == null)
        return true

    return false
}
// 课程名 过滤方法
function CourseNameFilter(value, row, column) {
    return row.course.courseName === value
}
// 实验室过滤
function labFilter(value, row, column) {
    if (row.lab)
        return row.lab.labName === value
    if (value == null)
        return true
    return false
}
// 时间过滤
function dateFilter(value, row, column) {
    return row.course.courseDate === value
}
// 节次过滤
function contentFilter(value, row, column) {
    return row.course.whichCourseContent == value
}
// 判断当前否有前面打钩的选择项，便于在表的header中展示多个操作的按钮
const mySelectRows = computed(() => {
    if (myTabel.value) {
        return myTabel.value.getSelectionRows()?.length === 0
    }
    return true
})
// 取消当前设定的所有过滤条件
function cancelFilter() {
    // console.log(myTabele.value.getSelectionRows())
    myTabel.value.clearFilter();
    filters.value = {}
    tableData.value = data.value
}

function multiEdit() {
    multiCourseEditView.value = true
    // console.log(myTabel.value.getSelectionRows())
}
async function multiDelete() {
    let rows = myTabel.value.getSelectionRows().map(v => v.course)

    await courseApi.removeCourseMul(rows)
    update.value = !update.value

}
function checkMultiOk() {
    let { user, course, date, content, lab, number, courseCheck, contentCheck, userCheck, dateCheck, labCheck, numberCheck } = multiCourseEditData
    if (userCheck && courseCheck && contentCheck && dateCheck && labCheck && numberCheck)
        return true
    if ((!userCheck && (user == null)))
        return true
    if (!courseCheck && (course == null || course.trim().length === 0))
        return true
    if (!dateCheck && (date == null))
        return true
    if (!contentCheck && (content == null))
        return true
    if (!labCheck && (lab == null))
        return true
    if (!numberCheck && (number == null))
        return true
    return false
}
function onCancelMultiCourseEditUpdate() {
    multiCourseEditData.user = null
    multiCourseEditData.course = null
    multiCourseEditData.date = null
    multiCourseEditData.content = null
    multiCourseEditData.lab = null
    multiCourseEditData.number = null
    multiCourseEditData.contentCheck = true
    multiCourseEditData.userCheck = true
    multiCourseEditData.dateCheck = true
    multiCourseEditData.courseCheck = true
    multiCourseEditData.labCheck = true
    multiCourseEditData.numberCheck = true
    // 关闭视图
    multiCourseEditView.value = false


}
// 多项编辑确定
async function onSubmitMultiCourseEditUpdate() {
    let { user, course, date, content, lab, number, courseCheck, contentCheck, userCheck, dateCheck, labCheck, numberCheck } = multiCourseEditData
    multiCourseEditView.value = false
    myTabel.value.getSelectionRows().forEach(v => {
        if (!contentCheck) {
            v.course.whichCourseContent = content
        }
        if (!dateCheck) {
            v.course.courseDate = date
        }

        if (!courseCheck) {
            v.course.courseName = course
        }

        if (!numberCheck) {
            v.course.studentNumber = number
        }
        if (!userCheck) {
            v.user = user
        }
        if (!labCheck) {
            v.lab = lab
        }
        if (v.user) {
            v.course.userNumber = v.user.userNumber
        }
        if (v.lab) {
            v.course.labId = v.lab.labId
        }

    })
    // console.log(myTabel.value.getSelectionRows().map(v=>v.course))
    await courseApi.updateCourseMul(myTabel.value.getSelectionRows().map(v => v.course))
    // 更新整个表单
    update.value = !update.value
}
function tablefilterChange(k) {
    let key = Object.keys(k)[0]
    let values = k[key]
    filters.value[key] = values
}
// 问题行标记颜色
function getRowClass({ row, rowIndex }) {    
    if (row.course.labId === 0) {
        return '--el-table-tr-bg-color: var(--el-color-warning-light-3)'
        
    }
    if (warnData.value) {
        var k = [row.course.courseDate,row.course.whichCourseContent,row.course.labId].join('@')
            if (warnData.value[k].iswarn)
                return '--el-table-tr-bg-color: var(--el-color-error-light-3);'
        }
}
const emptyDateItems = computed(() => {
   return data.value.filter(v => v.course.labId === 0).map(v => [v.course.courseDate, v.course.whichCourseContent])
})
const emptyIndex = ref(0)
function filterEmptyLab() {
    if (emptyDateItems.value.length === 0)
    {
        ElMessage({ type:'info', message:'没有' })
        return
    }
    if (emptyIndex.value == emptyDateItems.value.length)
    {
        emptyIndex.value = 0
    }
    let [d, c] = emptyDateItems.value[emptyIndex.value]
    console.log(emptyDateItems.value)
    tableData.value = data.value.filter(v => { return v.course.courseDate == d && v.course.whichCourseContent == c })
    emptyIndex.value += 1
}
const conflictDataItems = computed(() => {
    console.log(warnData.value)
    return Object.keys(warnData.value).reduce((s, v) => {
        s = s ?? []
        if (warnData.value[v].iswarn) {
            
            console.log(warnData.value[v].data)
            s.push(warnData.value[v].data)
        }
        console.log(s)
        return s
    },[])
})
const conflictIndex = ref(0)
function filterConfict() {
    if (conflictDataItems.value.length == 0) {
        ElMessage({type:'info','message':'不存在'})
        return
    }
    if (conflictDataItems.value.length == conflictIndex.value) {
        conflictIndex.value = 0
    }
    tableData.value = conflictDataItems.value[conflictIndex.value]
    conflictIndex.value +=1


}
function flagClick() {
    myTabel.value.getSelectionRows().forEach(v => { v.flag = 1 })
    console.log(myTabel.value.getSelectionRows())
    console.log(tableData.value)
}
function starClick() {
    myTabel.value.getSelectionRows().forEach(v => { v.flag = 2 })
}
function removeClick() {
    myTabel.value.getSelectionRows().forEach(v => { v.flag = 0 })
}
// const tableFlagFilter = [
//     { text: 1, value: 1 },
//     { text: 2, value: 2 },
//     { text: 0, value: 0 }
// ]
// function flagFilter(value, row) {
//     if (row.flag)
//         return row.flag === value
//     return value === 0
// }

</script>

<template>

    <div class='main'>
        <div class="xheader">
            <el-row justify="space-around">

                <el-col :span="3">
                    <el-select v-model="sessionSelected">
                        <el-option v-for="(item) in sessions" :key="item.sessionId" :value="item"
                            :label=sessionSelected.sessionName>
                            {{ selectSessionLabel(item) }}
                            <span v-if="item.cur == true">
                                <el-icon>
                                    <StarFilled />
                                </el-icon>
                            </span>
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-radio-group v-model="campusSelected" class="capmus-radio">
                        <el-radio v-for="(v, index) in campus" :value="v" :key=index>{{ v }}</el-radio>
                    </el-radio-group>
                </el-col>
                <el-col :span="6" :offset="3">
                    <el-button type="success" round @click="filterEmptyLab">临时机房</el-button>
                    <el-button type="success" round @click="filterConfict">冲突课程</el-button>
                </el-col>


                <el-col :span="6">

                    <el-button type="primary" round @click="cancelFilter">初始视图</el-button>
                    <el-button type="primary" round :icon="DocumentAdd" @click="courseAddView = true">
                        新增课程
                    </el-button>

                </el-col>
            </el-row>
        </div>

        <div class="xtable" v-loading="loading">
            <el-table ref="myTabel" highlight-current-row :data="tableData" rowkey="courseId" table-layout="auto"
                @filter-change="tablefilterChange" :row-style="getRowClass">

                <el-table-column type="selection" align="right" />


                <el-table-column property="user.userName" label="教师" align="center" column-key="user.userNumber"
                    :filters="tableUsersFilter" :filter-method="userNameFilter">
                    <template #default="{ row }">
                        {{ row.user.userName }}({{ row.user.userNumber }})
                    </template>
                </el-table-column>


                <el-table-column property="course.courseName" label="课程" align="center" column-key="course.courseName"
                    :filters="tableCourseFilter" :filter-method="CourseNameFilter" />
                <el-table-column property="course.courseDate" label="时间" align="center" sortable
                    column-key="course.courseDate" :filters="tableDateFilter" :filter-method="dateFilter" />
                <el-table-column property="course.whichCourseContent" label="节次" align="center" sortable
                    column-key="course.whichCourseContent" :filters="tableContentFilter" :filter-method="contentFilter">
                    <template #default="scope">
                        {{ sessionSelected.courseContents[scope.row.course.whichCourseContent] }}
                    </template>
                </el-table-column>
                <el-table-column property="lab.labName" label="实验室" align="center" column-key="lab.labName"
                    :filters="tableLabFilter" :filter-method="labFilter">
                    <template #default="{ row }">
                        <div v-if="row.lab">
                            {{ row.lab.labName }}({{ row.lab.campus }}-{{ row.lab.location }})
                        </div>
                    </template>
                </el-table-column>
                <el-table-column property="course.studentNumber" label="上课人数" align="center" />



                <!-- <el-table-column property="flag" align="center" column-key="flag" :filters="tableFlagFilter"
                    :filter-method="flagFilter" style="width:120px" filter-class-name="flagPop" >
                    <template #default="{ row }">
                        <span>
                            <el-icon v-if="row.flag == 1">
                                <Flag />
                            </el-icon>
                            <el-icon v-else-if="row.flag == 2">
                                <Star />
                            </el-icon>
                            <el-icon v-else>
                            </el-icon>
                        </span>
                    </template>
                    <template #header>
                        <span class="flag">
                            <el-button text type="error" :icon="Flag" @click="flagClick" />
                            <el-button text type="error" :icon="Star" @click="starClick" />
                            <el-button text type="error" :icon="Remove" @click="removeClick" />
                        </span>
                    </template>
                </el-table-column> -->

                <el-table-column property="course.remark" label="备注" align="center" />

                <el-table-column label="Operations" align="center" width="220px">
                    <template #header="socpe">
                        <span v-if="!mySelectRows">
                            <el-button size="small" @click="multiEdit">多项编辑</el-button>
                            <el-button size="small" type="danger" @click="multiDelete()">多项删除</el-button>
                        </span>

                    </template>
                    <template #default="scope">
                        <el-button size="small" @click="eidtInformation(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="deleteInformation(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>
    <el-drawer v-model="courseAddView" direction="rtl" size="75%" :with-header="false">
        <div>
            <el-card>
                <div class="baseInfo">
                    <div class="itemInfo">
                        <span>请选择教师</span>
                        <el-select v-model="addCourse.userInfo">
                            <el-option v-for="u in users" :key="u.userId" :value="u"
                                :label="addCourse.userInfo.userName">
                                {{ u.userName + '(' + u.userNumber + ')' }}
                            </el-option>
                        </el-select>
                    </div>
                    <div class="itemInfo">
                        <span>选择实验室</span>
                        <el-select v-model="addCourse.labInfo" style="width:120px">
                            <el-option v-for="l in labs[campusSelected]" :key="l.labId" :value="l"
                                :label="addCourse.labInfo.labName">
                                {{ l.labName + '(' + l.location + ')' }}
                            </el-option>
                        </el-select>
                    </div>
                    <div class="itemInfo">
                        <span>输入课程名</span>
                        <el-input v-model="addCourse.courseName" placeholder="请输入要添加的课程名" style="width:120px" />
                    </div>
                    <div class="itemInfo">
                        <span>学生人数</span>
                        <el-input-number v-model="addCourse.stuNumber" :min="1"></el-input-number>
                    </div>
                </div>

                <el-divider></el-divider>

                <el-tabs>
                    <div class="tabs">
                        <el-tab-pane label="按周添加">
                            <div class="maySelected">
                                <el-checkbox v-model="weekduration.weekCheckbox[index]"
                                    v-for="(w, index) in weekduration.weeks" :key="index" style="width:55px">
                                    <el-tooltip :content="w" effect="light" placement="top">
                                        <span>第{{ index + 1 }}周</span>
                                    </el-tooltip>
                                </el-checkbox>
                            </div>
                            <el-divider></el-divider>

                            <div class="contentSelect">
                                <div style="flex-direction:column;justify-content:space-around;align-content:center">
                                    <div style="padding:20px,0px">
                                        <el-checkbox-group v-model="addByWeek.selected" :options="[0, 1, 2, 3, 4, 5, 6]"
                                            style="width:100%">
                                            <el-checkbox-button
                                                v-for="(d, index) in ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']"
                                                :value="index">{{ d }}
                                            </el-checkbox-button>

                                        </el-checkbox-group>
                                    </div>
                                    <div class="content">
                                        <el-checkbox v-model="addByWeek.content[index]"
                                            v-for="c, index in sessionSelected.courseContents" :label="c" :key="index"
                                            style="width:120px">
                                        </el-checkbox>
                                    </div>
                                </div>
                                <div
                                    style="display:flex;flex-direction:column;justify-content:space-around;align-content:center">
                                    <div>
                                        <el-button @click="addWeekTag" style="width:150px">添加到预选池中</el-button>
                                    </div>
                                    <div>
                                        <el-button @click="clear" style="width:150px">清空预选池 </el-button>
                                    </div>
                                </div>
                            </div>
                            <!-- <el-divider></el-divider> -->
                        </el-tab-pane>

                        <el-tab-pane label="按日添加">
                            <div style="width:95%;padding:20px">
                                <el-date-picker v-model="addByDay.date" type="dates" placeholder="选择一个或多个日期"
                                    :disabled-date="checkValidDate" style="width:100%" />
                            </div>

                            <div class="contentSelect">
                                <div class="content">
                                    <el-checkbox v-model="addByDay.content[index]"
                                        v-for="c, index in sessionSelected.courseContents" :label="c" :key="index"
                                        style="width:120px">
                                    </el-checkbox>
                                </div>
                                <div
                                    style="display:flex;flex-direction:column;justify-content:space-around;align-content:center">
                                    <div>
                                        <el-button @click="addDayTag" style="width:150px">添加到预选池中</el-button>
                                    </div>
                                    <div>
                                        <el-button @click="clear" style="width:150px">清空预选池 </el-button>
                                    </div>
                                </div>
                            </div>

                        </el-tab-pane>
                    </div>

                </el-tabs>
            </el-card>
        </div>
        <div class="maySelected">
            <!-- 表 -->
            <el-tag v-for="tag, index in tags" :closable="true" @close="handleTagClose(tag)" :type="tag.type"
                :key="index" style="height:70px;width:200px">
                <template #default>
                    <div style="padding:0px">
                        {{ tag.courseName.length > 15 ? tag.courseName.substr(0, 12) + '...' : tag.courseName }}({{
                        tag.studentNumber }})
                    </div>
                    <el-divider style="padding:0px;margin:0.75px" />
                    <div style="margin:0px; padding:0px">
                        {{ dayjs(tag.courseDate).format('YYYY-MM-DD(dd)') }}{{ sessionSelected.courseContents[tag.whichCourseContent] }}
                        <el-divider style="padding:0px;margin:0.75px" />
                        {{ tag.userName }}({{ tag.userNumber }}){{ tag.labName }}
                    </div>
                </template>

            </el-tag>
        </div>
        <template #footer>
            <el-button :disabled="tags.empty()" type="primary" @click="onSubmitCourseAddUpdate">
                <template #loading>
                    <span>提交中</span>
                </template>
                确认
            </el-button>
        </template>

    </el-drawer>

    <el-dialog v-model="courseEditView" title="课程修改">
        <el-form v-model="courseEditData" label-width="auto" class="editDialog">


            <el-form-item label="教师" :required="true" class="multidiv">
                <el-select v-model="courseEditData.user">
                    <el-option v-for="u in users" :key="u.userId" :value="u" :label="courseEditData.user.userName">
                        {{ u.userName + '(' + u.userNumber + ')' }}
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="课程名" :required="true" class="multidiv">
                <el-input v-model.trim="courseEditData.course.courseName" style="width:100%">
                </el-input>
            </el-form-item>



            <el-form-item label="节次" :required="true" class="multidiv">
                <el-select v-model="courseEditData.course.whichCourseContent">
                    <el-option v-for="c, i in sessionSelected.courseContents" :value="i" :label="c">
                    </el-option>
                </el-select>
            </el-form-item>



            <el-form-item label="实验室" :required="true" class="multidiv">
                <el-select v-model="courseEditData.lab">
                    <el-option v-for="l in currentLabs" :value="l" :label="courseEditData.lab.labName">
                        {{ l.labName }}
                    </el-option>
                </el-select>
            </el-form-item>


            <div style="display:flex;justify-content:space-between">

                <el-form-item label="日期" :required="true">
                    <el-date-picker type="date" v-model="courseEditData.course.courseDate" value-format="YYYY-MM-DD"
                        :disabled-date="checkValidDate" :clearable="false" :editable="false">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="上课人数" :required="true">
                    <el-input-number v-model="courseEditData.course.studentNumber">
                    </el-input-number>
                </el-form-item>
            </div>
            <div style="display:flex; justify-content:center; padding:30px 0px;">
                <el-form-item>
                    <el-button type="primary" :disabled="editDisable(courseEditData)"
                        @click="onSubmitCourseEditUpdate">确认修改</el-button>
                    <el-button @click="courseEditView = false">取消修改</el-button>
                </el-form-item>
            </div>

        </el-form>

    </el-dialog>



    <el-dialog v-model="multiCourseEditView" title="多个课程调整与修改">
        <el-form v-model="multiCourseEditData" label-width="auto" class="editDialog">

            <el-form-item label="教师" :required="true">
                <div class="multidiv">
                    <el-switch v-model="multiCourseEditData.userCheck"></el-switch>
                    <el-select clearable :disabled="multiCourseEditData.userCheck" v-model="multiCourseEditData.user">
                        <el-option v-for="u in users" :key="u.userId" :value="u"
                            :label="multiCourseEditData.user == null ? '' : multiCourseEditData.user.userName">
                            {{ u.userName + '(' + u.userNumber + ')' }}
                        </el-option>
                    </el-select>
                </div>
            </el-form-item>

            <el-form-item label="课程名" :required="true">
                <div class="multidiv">
                    <el-switch v-model="multiCourseEditData.courseCheck"></el-switch>
                    <el-input clearable :disabled="multiCourseEditData.courseCheck" v-model="multiCourseEditData.course"
                        style="width:100%">
                    </el-input>
                </div>
            </el-form-item>
            <el-form-item label="节次" :required="true">
                <div class="multidiv">
                    <el-switch v-model="multiCourseEditData.contentCheck"></el-switch>
                    <el-select :disabled="multiCourseEditData.contentCheck" v-model="multiCourseEditData.content">
                        <el-option v-for="c, i in sessionSelected.courseContents" :value="i" :label="c">
                        </el-option>
                    </el-select>
                </div>
            </el-form-item>

            <el-form-item label="实验室" :required="true">
                <div class="multidiv">
                    <el-switch v-model="multiCourseEditData.labCheck"></el-switch>
                    <el-select :disabled="multiCourseEditData.labCheck" v-model="multiCourseEditData.lab">
                        <el-option v-for="l in allLabs" :value="l"
                            :label="multiCourseEditData.lab ? (multiCourseEditData.lab.labName) : ''">
                            {{ l.campus + '-' + l.labName }}
                        </el-option>
                    </el-select>
                </div>
            </el-form-item>
            <div style="display:flex;justify-content:space-between">
                <el-form-item label="日期" :required="true">
                    <div class="multidiv">
                        <el-switch v-model="multiCourseEditData.dateCheck"></el-switch>
                        <el-date-picker type="date" :disabled="multiCourseEditData.dateCheck"
                            v-model="multiCourseEditData.date" value-format="YYYY-MM-DD" :disabled-date="checkValidDate"
                            :clearable="false" :editable="false">
                        </el-date-picker>
                    </div>
                </el-form-item>


                <el-form-item label="上课人数" :required="true">
                    <div class="multidiv">
                        <el-switch v-model="multiCourseEditData.numberCheck"></el-switch>

                        <el-input-number clearable :disabled="multiCourseEditData.numberCheck"
                            v-model="multiCourseEditData.number">
                        </el-input-number>
                    </div>
                </el-form-item>
            </div>
            <div style="display:flex; justify-content:center; padding:30px 0px;">
                <el-form-item>

                    <el-button type="primary" :disabled="checkMultiOk()"
                        @click="onSubmitMultiCourseEditUpdate">确认修改</el-button>

                    <el-button @click="onCancelMultiCourseEditUpdate">取消修改</el-button>

                </el-form-item>
            </div>


        </el-form>

    </el-dialog>

</template>

<style lang="less" scoped>
  .warning-row {
      background-color: #f3d19e;
  }

.main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: auto;

    .xheader {
        margin: 20px 0px;
    }

    .xtable {
        width: 80vw;
        margin: 0 40px;

        .el-table {
            height: 85vh;

            .warning-row {
                background-color: #f3d19e;
            }
        }


    }
}



.maySelected {
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 10px;
    gap: 10px;

    div {
        width: auto;
    }
}

.tabs {
    height: auto;

}

.dayTab {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;

}

.baseInfo {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;


    .itemInfo {
        display: inline-flex;
        justify-content: fle-start;

        span {
            display: block;
            line-height: 32px;
            font-size: 13px;
            width: 120px;
            text-align: center;
        }

    }



}

.contentSelect {
    margin: 15px;
    display: flex;
    justify-content: space-between;

    .content {
        margin-top: 10px;
        padding: 15px;
        font-size: 15px;
        font-weight: 400;
        justify-content: space-between;
        height: 40px;
    }
}

.flag {
    .el-button {
        padding: 0;
        margin: 0;
    }

    padding:0;
    margin-right:10px
}

.editDialog {
    padding: 0 20px;
    margin: 0 20px;
    display: flex;
    flex-direction: column;

    .multidiv {
        display: flex;
        flex-direction: inline-block;
        width: 100%;

        .el-switch {
            padding: 0px 20px;
        }
    }

}
  .warning-row {
        --el-table-tr-bg-color: var(--el-color-error-light-3);
  }
</style>